<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="dataList" height="450" style="width: 100%;margin: 5px">
            <el-table-column prop="clientnumber" label="客户编号" fixed width=""></el-table-column>
            <el-table-column prop="clientname" label="客户名称" width=""></el-table-column>
            <el-table-column prop="linkman" label="联系人" width=""></el-table-column>
            <el-table-column prop="phonenumber" label="电话号码" width=""></el-table-column>
            <el-table-column prop="postalcode" label="邮政编码" width=""></el-table-column>
            <el-table-column prop="province" label="省份" width=""></el-table-column>
            <el-table-column prop="type" label="类型" width=""></el-table-column>
            <el-table-column prop="" fixed="right" label="详细信息" width="">
                <template slot-scope="scope" fixed="right" >
                    <el-link type="primary"  @click="detailedMessage(scope.row)">详细信息</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                style="margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="查看详细信息" :visible.sync="dialogTableVisible" width="80%">
            <el-descriptions class="margin-top" :column="4" border>
                <el-descriptions-item label="客户编号">{{formData.clientnumber}}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{formData.clientname}}</el-descriptions-item>
                <el-descriptions-item label="客户地址" span="2">{{formData.clientaddress}}</el-descriptions-item>
                <el-descriptions-item label="客户经理">{{formData.clientmanager}}</el-descriptions-item>
                <el-descriptions-item label="邮政编码">{{formData.postalcode}}</el-descriptions-item>
                <el-descriptions-item label="电话号码">{{formData.phonenumber}}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{formData.linkman}}</el-descriptions-item>
                <el-descriptions-item label="简称">{{formData.shortcut}}</el-descriptions-item>
                <el-descriptions-item label="代码">{{formData.code}}</el-descriptions-item>
                <el-descriptions-item label="省份">{{formData.province}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{formData.email}}</el-descriptions-item>
                <el-descriptions-item label="税号">{{formData.taxnumber}}</el-descriptions-item>
                <el-descriptions-item label="银行账号">{{formData.bandnumber}}</el-descriptions-item>
                <el-descriptions-item label="开户银行">{{formData.openbank}}</el-descriptions-item>
                <el-descriptions-item label="类型">{{formData.type}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{formData.remark}}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            total: 0,
            currentPage: 1,
            pageSize: 10,
            dialogTableVisible: false,
            formData: {}
        },
        methods: {
            getList(){
                let _this = this;
                selectAjax("get","/clienttable/queryPrintClientLimit",{
                    "currentPage": _this.currentPage,
                    "pageSize": _this.pageSize,
                    "clientname": '',
                    "linkman": '',
                    "type": ''
                },function (data) {
                    _this.dataList = data.data.clienttableList;
                    _this.total = data.data.totao;
                })
            },
            detailedMessage(row){
                let _this = this;
                _this.dialogTableVisible = true;
                _this.formData = row;
                console.log(_this.formData)
            },
            handleSizeChange(val){
                let _this = this;
                _this.pageSize = val;
                _this.getList();
            },
            handleCurrentChange(val){
                let _this = this;
                _this.currentPage = val;
                _this.getList();
            }
        },
        mounted(){
            this.getList();
        }
    })
</script>
</html>